<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'

const animationDuration = 1000

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    avr: {
      type: String,
      default: ''
    },
    indicator: {
      type: Array,
      default() {
        return []
      }
    },
    radarData: {
      type: Array,
      default() {
        return []
      }
    },
    dsc: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    // 初始化 Echarts
    initChart() {
      // 初始化 chart
      this.chart = echarts.init(this.$el)

      // 渲染数据
      this.setChartOption()
    },

    // 设置 Echarts option
    setChartOption() {
      const that = this

      this.chart.setOption({
        title: {
          text: '基金经理表现评价'
        },
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            // console.log(JSON.stringify(params))
            let tips = ''
            for (let i = 0; i < params.value.length; i++) {
              tips += that.indicator[i].name + '：' + params.value[i] + '&nbsp;' + '（' + that.dsc[i] + '）' + '</br>'
            }
            return tips
          },
          // 将此限制打开后tooltip将不再溢出
          confine: true
          // position: ['15%', '25%']
        },
        grid: {
          left: '3%',
          right: '4%',
          // bottom: '3%',
          containLabel: true
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#999',
              backgroundColor: '#fff',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: this.indicator,
          radius: 80
        },
        series: [{
          name: '业绩评价',
          type: 'radar',
          // areaStyle: {normal: {}},
          data: [
            {
              value: this.radarData,
              areaStyle: {
                normal: {
                  color: 'rgb(124, 181, 236)'
                }
              }
            }
          ]
        }],
        animationDuration
      })
    },

    // 重设大小
    resizeChart() {
      this.chart.resize()
    }
  }
}
</script>
